<template>
    <div class="container">
        <el-button type="primary" @click="dialogVisible = true" class="add-btn">新 增</el-button>
        <el-table :data="tableData" border stripe class="lottery-table" height="calc(100vh - 220px)">
            <el-table-column prop="lottery" label="彩种编码" align="center" min-width="120" />
            <el-table-column prop="lotteryName" label="彩种名称" align="center" min-width="120" />
            <el-table-column prop="lotteryTypeDesc" label="彩种类型" align="center" min-width="120" />
            <el-table-column label="操作" align="center" min-width="120">
                <template #default="scope">
                    <el-button type="danger" size="small" @click="handleDelete(scope.row)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
        <!-- 新增弹窗 -->
        <el-dialog v-model="dialogVisible" title="新增彩种" width="300px" :close-on-click-modal="false"
            @close="closeDialog">
            <el-form :model="form" :rules="rules" ref="formRef" label-width="80px">
                <el-form-item label="彩种编码" prop="code">
                    <el-input v-model="form.code" maxlength="10" />
                </el-form-item>
                <el-form-item label="彩种名称" prop="name">
                    <el-input v-model="form.name" maxlength="10" />
                </el-form-item>
                <el-form-item label="彩种类型" prop="type">
                    <el-select v-model="form.type" maxlength="10" placeholder="请选择彩种类型">
                        <el-option label="3码" value="P3D" />
                        <el-option label="11选5" value="P11X5" />
                    </el-select>
                </el-form-item>
            </el-form>
            <template #footer>
                <el-button @click="dialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="handleAdd">确 定</el-button>
            </template>
        </el-dialog>
    </div>
</template>

<script setup>
import { ref, reactive } from 'vue';
import { ElMessage } from 'element-plus';

import { addLottery, getLottery, deleteLottery } from '@/api/Omission/maintain';

const tableData = ref();

const dialogVisible = ref(false);
const formRef = ref();
const form = reactive({
    code: '',
    name: '',
    type: '',
});
const rules = {
    code: [{ required: true, message: '请输入彩种编码', trigger: 'blur' }],
    name: [{ required: true, message: '请输入彩种名称', trigger: 'blur' }],
    type: [{ required: true, message: '请选择彩种类型', trigger: 'blur' }],
};

const init = async () => {
    const res = await getLottery();
    if (res.code === "S") {
        tableData.value = res.data;
    } else {
        ElMessage.error(res.message || '获取彩种列表失败');
    }
}
init();

const handleAdd = async () => {
    formRef.value.validate(async (valid) => {
        if (valid) {
            const formdata = {
                lottery: form.code,
                lotteryName: form.name,
                lotteryType: form.type,
            };
            const res = await addLottery(formdata);
            if (res.code === "S") {
                await closeDialog();
                await init();
                ElMessage.success('新增成功');
            } else {
                ElMessage.error(res.message || '新增失败');
            }
        }
    });
}

const handleDelete = async (row) => {
    const res = await deleteLottery(row);
    if (res.code !== "S") {
        ElMessage.error(res.message || '删除失败');
        return;
    }
    ElMessage.success('删除成功');
    await init();
}

const closeDialog = async () => {
    dialogVisible.value = false;
    Object.assign(form, { code: '', name: '', type: '' });
    formRef.value && formRef.value.clearValidate();
}
</script>

<style scoped lang="scss">
@use "@/assets/global.scss" as *;

.add-btn {
    margin-bottom: 18px;
}

.lottery-table {
    background: #fafbfc;
    border-radius: 8px;

    .el-table__header th {
        background: #f7f7f7;
        font-weight: bold;
        font-size: 16px;
    }

    .el-table__row {
        font-size: 15px;
    }
}
</style>